import React from 'react';
import styles from './index.less';
import { Col, Row } from 'antd';

/**
 * 用户信息展示
 */
class User extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    const { stepExplain, thinkTime, battleData, step, total } = this.props;
    return (
      <div className={styles.player}>
        <Row className={styles.user}>
          <Col span={24} className={styles.body}>
            <Row>
              <Col span={9} className={styles.title}>
                {battleData?.firstUserName}
              </Col>
              <Col span={2} className={styles.placeholder}>:</Col>
              <Col span={9} className={styles.title}>
                {battleData?.lastUserName}
              </Col>
              {/*step 从0开始，所以实际total要减一*/}
              <Col span={4} className={styles.step}>{step}/{Math.max(total - 1, 0)}</Col>
            </Row>
            <Row>
              <Col span={6} className={styles.chessBook}>
                { `步时: ${(thinkTime / 1000).toFixed(1)}s`}
              </Col>
              <Col span={5} className={styles.round}>{stepExplain || '-'}</Col>
              <Col span={4} className={styles.round}
                   style={{ color: `${battleData?.resultMsg === '失败' ? '#f30404de' : '#ffb200'}` }}>
                {battleData?.resultMsg}
              </Col>
              <Col span={9} className={styles.date}>{battleData?.createTime}</Col>
            </Row>
          </Col>
        </Row>
      </div>
    );
  }
}

export default User;
